<template>
  <div>
    <h3>受益所有人</h3>
    <el-card>
      <div>
        <div class="title">企业基本信息</div>
        <div class="border-bottom">
          <el-form ref="form" :model="companyForm" :rules="rules" label-width="100px" inline label-position="top">
            <el-form-item label="企业名称" prop="companyName">
              <el-input size="small" v-model="companyForm.companyName" placeholder="请输入企业名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="companyCode">
              <el-input size="small" v-model="companyForm.companyCode" placeholder="请输入统一社会信用代码" clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="title mar-top-12">受益所有人信息</div>
        <el-row class="mar-top-12">
          <el-col :span="12">
            <el-button size="mini" round type="primary" plain icon="el-icon-plus" @click="addPeople">新增</el-button>
            <el-button size="mini" round type="warning" plain icon="el-icon-download" @click="downloadInfo">下载模板</el-button>
            <el-button size="mini" round type="success" plain icon="el-icon-upload2" @click="uploadInfo">导入</el-button>
            <div class="sum-tips">
              受益所有人数量：<span>{{ peopleData.length }} </span>&nbsp;人
            </div>
          </el-col>
        </el-row>
        <el-table
          :data="peopleData"
          style="width: 100%"
          border
          class="table-box mar-top-12"
          :header-cell-style="{ background: '#fff', color: '#333' }"
        >
          <!-- <el-table-column label="序号" width="100px">
            <template slot-scope="scope">
              {{ (page - 1) * size + scope.$index + 1 }}
            </template>
          </el-table-column> -->
          <el-table-column type="index" prop="prop" label="序号" width="100px"> </el-table-column>
          <el-table-column prop="name" label="姓名" width="200px" show-overflow-tooltip>
            <template #default="scope">
              <el-input v-if="scope.row.editing" v-model="scope.row.name" size="mini" />
              <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nationality" label="国籍" width="200px" show-overflow-tooltip>
            <template #default="scope">
              <el-input v-if="scope.row.editing" v-model="scope.row.nationality" size="mini" />
              <span v-else>{{ scope.row.nationality }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="idType" label="身份证件或身份证明文件类型" min-width="210">
            <template #default="scope">
              <el-input v-if="scope.row.editing" v-model="scope.row.idType" size="mini" />
              <span v-else>{{ scope.row.idType }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="idCode" label="身份证件或身份证明文件号码" min-width="210">
            <template #default="scope">
              <el-input v-if="scope.row.editing" v-model="scope.row.idCode" size="mini" />
              <span v-else>{{ scope.row.idCode }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="140px">
            <template slot-scope="{ row }">
              <el-button type="text" icon="el-icon-finished" v-if="row.editing" @click="toggleEdit(row)">保存</el-button>
              <el-button type="text" icon="el-icon-edit" v-if="!row.editing" @click="toggleEdit(row)">修改</el-button>
              <el-button type="text" icon="el-icon-delete" @click="deleteItem(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <div class="text-right mar-top-12">
      <el-button size="small" type="primary" @click="submit">提 交</el-button>
      <el-button size="small" @click="clear">清 空</el-button>
    </div>
    <!-- 新增 编辑 -->
    <el-dialog
      :title="addFlag ? '新增' : '修改'"
      :visible.sync="peopleDialog"
      width="40%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <div style="width: 55%; margin: auto">
        <el-form ref="peopleform" :model="peopleForm" :rules="peopleRules" label-position="top">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="peopleForm.name" size="small" clearable placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="国籍" prop="nationality">
            <el-input v-model="peopleForm.nationality" size="small" clearable placeholder="请输入国籍"></el-input>
          </el-form-item>
          <el-form-item label="身份证件或身份证明文件类型" prop="idType">
            <el-input v-model="peopleForm.idType" size="small" clearable placeholder="请输入身份证件或身份证明文件类型"></el-input>
          </el-form-item>
          <el-form-item label="身份证件或身份证明文件号码" prop="idCode">
            <el-input v-model="peopleForm.idCode" size="small" clearable placeholder="请输入身份证件或身份证明文件号码"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <!--错误 提示 -->
    <el-dialog
      title="提示"
      :visible.sync="errorDialog"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="() => (errorDialog = false)"
    >
      <div>
        <div class="msg-tips">
          <div style="display: flex; align-items: center; justify-content: flex-start" v-if="!ispass">
            <i class="el-icon-warning icon-error error-color"></i>
            <span class="error-color">核验不一致！</span>
          </div>
          <div style="display: flex; align-items: center; justify-content: flex-start" v-if="ispass">
            <i class="el-icon-warning icon-error success-color"></i>
            <span class="success-color">核验通过</span>
          </div>
          <div class="error-text" @click="goPage">业务流水号：CHECK2025050500000018，点击查看详情!</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BeneficiaryVerification',

  data() {
    return {
      page: 1,
      size: 10,
      companyForm: {
        companyName: '',
        companyCode: '',
      },
      rules: {
        companyName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        companyCode: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
      },
      peopleData: [
        // { id: '1', name: '张三', nationality: '中国', idType: '身份证', idCode: '310226199203024512', editing: false }
      ],
      peopleDialog: false,
      addFlag: true,
      peopleForm: {
        id: '',
        name: '',
        nationality: '',
        idType: '',
        idCode: '',
      },
      peopleRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        nationality: [{ required: true, message: '请输入国籍', trigger: 'blur' }],
        idType: [{ required: true, message: '请输入身份证件或身份证明文件类型', trigger: 'blur' }],
        idCode: [{ required: true, message: '请输入身份证件或身份证明文件号码', trigger: 'blur' }],
      },
      errorDialog: false,
      ispass: true,
    }
  },

  mounted() {},

  methods: {
    addPeople() {
      this.addFlag = true
      this.peopleDialog = true
    },
    downloadInfo() {},
    uploadInfo() {},
    handleClose() {
      this.peopleDialog = false
      this.$refs['peopleform'].resetFields()
      this.peopleForm.id = ''
    },
    confirm() {
      this.$refs['peopleform'].validate((valid) => {
        if (valid) {
          this.peopleForm.id = this.peopleForm.id ? this.peopleForm.id : Date.now()
          const item = Object.assign({}, this.peopleForm)
          item.editing = false
          if (this.addFlag) {
            this.peopleData.push(item)
            this.ispass = !this.peopleData.some((item) => item.name == '李四')
          } else {
            const index = this.peopleData.findIndex((item) => item.id === this.peopleForm.id)
            if (index !== -1) {
              this.peopleData[index] = item
            }
          }
          this.handleClose()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    toggleEdit(row) {
      row.editing = !row.editing
      // 如果是保存操作，可以在这里调用API保存数据
      if (!row.editing) {
        this.saveData(row)
      }
    },
    handleEditComplete(row) {
      // 失去焦点时自动保存
      row.editing = false
      this.saveData(row)
    },
    saveData(row) {
      console.log('保存数据:', row)
      // 这里可以调用API保存数据
    },
    deleteItem(row) {
      this.peopleData = this.peopleData.filter((item) => item.id !== row.id)
    },
    submit() {
      this.errorDialog = true
    },
    clear() {
      this.companyForm.companyName = ''
      this.companyForm.companyCode = ''
    },
    goPage() {
      this.$router.push({
        path: '/infoVerification/detail',
        query: {
          flag: this.ispass ? 1 : 0,
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0px;
}
.sum-tips {
  display: inline-block;
  font-size: 14px;
  line-height: 32px;
  text-align: right;
  margin-left: 12px;
  color: #999;
  span {
    color: #3399cc;
  }
}
.msg-tips {
  .icon-error {
    font-size: 28px;
  }
  .error-text {
    cursor: pointer;
    text-decoration: underline;
    padding-left: 10px;
    line-height: 28px;
  }
  .error-text:hover {
    color: #409eff;
  }
}
</style>